<template>
  <div>
    <el-row :gutter="16">
      <el-col :span="8" class="mb20">
        <el-card shadow="never">
          <div slot="header" class="tl-center">资产类别示意图</div>
          <pie1 />
          <!-- <div id="pie1" :style="{width: '100%', height: '400px'}"></div> -->
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="never">
          <div slot="header" class="tl-center">资产标签类型示意图</div>
          <div id="pie2" :style="{width: '100%', height: '400px'}"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="never">
          <div slot="header" class="tl-center">资产状态示意图</div>
          <div id="pie3" :style="{width: '100%', height: '400px'}"></div>
        </el-card>
      </el-col>
      <!-- <el-col>
        <el-card shadow="never">
          <div slot="header" class="tl-center">资产使用部门示意图</div>
          <div id="bar" :style="{width: '100%', height: '400px'}"></div>
        </el-card>
      </el-col>-->
      <el-col>
        <el-card shadow="never">
          <div slot="header" class="tl-center">资产值线性示意图</div>
          <line1 />
          <!-- <div id="line" :style="{width: '100%', height: '400px'}"></div> -->
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { statisticalByLableType, statisticalByState, statisticalByUserDept, statisticalByPrice } from '@/api/assetsNew'
import Pie1 from './Pie1'
import Line1 from './Line1'

export default {
  components: {
    Pie1,
    Line1
  },
  data() {
    return {
      polar1: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          bottom: '10px',
          left: 'left',
          data: []
        },
        series: [
          {
            name: '数据',
            type: 'pie',
            radius: '45%',
            center: ['50%', '50%'],
            data: [],
            label: {
              show: false
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      polar2: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          bottom: '10px',
          left: 'left',
          data: []
        },
        series: [
          {
            name: '数据',
            type: 'pie',
            radius: '45%',
            center: ['50%', '50%'],
            data: [],
            label: {
              show: false
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      barOption: {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '数据',
            type: 'bar',
            barWidth: '50%',
            data: []
          }
        ]
      }
    }
  },
  created() {
    // 标签类型
    statisticalByLableType().then(res => {
      let arr = res.data
      let legendData = [],
        seriesData = []
      arr.map(v => {
        legendData.push(v.lableType)
        seriesData.push({
          value: v.total,
          name: v.lableType
        })
      })
      var dom = document.getElementById('pie2')
      var myChart = this.echarts.init(dom, 'light')
      this.polar1.legend.data = legendData
      this.polar1.series[0].data = seriesData

      myChart.setOption(this.polar1)
    })

    // 状态
    statisticalByState().then(res => {
      let arr = res.data
      let legendData = [],
        seriesData = []
      arr.map(v => {
        legendData.push(v.state)
        seriesData.push({
          value: v.total,
          name: v.state
        })
      })
      var dom = document.getElementById('pie3')
      var myChart = this.echarts.init(dom, 'light')
      this.polar2.legend.data = legendData
      this.polar2.series[0].data = seriesData

      myChart.setOption(this.polar2)
    })
  }
}
</script>
